<template>
  <view
    class="login"
    style="background-image: url('../../static/login_bg.png')"
  >
    <view
      style="
        width: 48rpx;
        height: 52rpx;
        position: absolute;
        top: 106rpx;
        left: 34rpx;
      "
      ><image
        class="width100 height100"
        src="../../static/login_close.png"
        mode=""
    /></view>
    <view class="login-logo">
      <text class="f22 c_00">LOGO</text>
    </view>
    <view class="welcome-text">
      <text>欢迎登录系统平台</text>
    </view>
    <view class="phoneNumber">
      <view class="phone-input">
        <view class="icon"
          ><image
            class="width100 height100"
            mode="aspectFit"
            src="/static/login_phone.png"
        /></view>
        <input
          class="f15 c_B4"
          placeholder-style="font-size:30rpx;"
          maxlength="11"
          placeholder="请输入手机号"
          :value="phone"
          @input="getPhone"
        />
      </view>
    </view>
    <view class="password">
      <view class="password-input">
        <view class="icon"
          ><image
            class="width100 height100"
            mode="aspectFit"
            src="/static/login_password.png"
        /></view>

        <input
          class="f15 c_B4"
          :password="show"
          placeholder-style="font-size:30rpx;"
          maxlength="16"
          placeholder="请输入密码"
          :value="password"
          @input="getPassword"
        />
        <view class="password-icon" @click="showPass"
          ><image
            class="width100 height100"
            :src="show ? '../../static/yanjing-yingcang.png' : '../../static/yanjing.png'"
            mode=""
        /></view>
      </view>
    </view>

    <button
      class="button_default quick-login"
      :style="{
        background: nextStep == true && password ? '#4f7cf3' : '#CCCDD0',
      }"
      disabled="!nextStep"
      @click="login"
    >
      <text class="f16 c_ff">登录</text>
    </button>

    <view class="flex-row">
      <radio
        :checked="isChecked"
        color="rgba(30, 115, 237, 1)"
        @click="toggleCheckbox"
        style="transform: scale(0.7)"
      >
      </radio>
      <text class="c_2A" @click="toggleCheckbox" style="margin-left: 14rpx"
        >阅读并同意</text
      >

      <text class="c_4F" @click="goAgreement">用户协议</text>
      <text>和</text>
      <text class="c_4F" @click="goAgreement2">隐私政策</text>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      phoneLen: "",
      nextStep: false,
      isChecked: false,
      show: true,
    };
  },
  methods: {
    showPass() {
      this.show = !this.show;
      console.log(this.show);
    },

    toggleCheckbox() {
      this.isChecked = !this.isChecked;
    },

    //获取用户输入手机号码
    getPhone(e) {
      this.phone = e.detail.value;
      this.phoneLen = e.detail.cursor;
      //不通过正则
      if (!/^1(?:3|4|5|6|7|8|9)\d{9}$/.test(e.detail.value)) {
        this.nextStep = false;
        return;
      }
      this.agree();
    },
    //获取用户输入密码
    getPassword(e) {
      this.password = e.detail.value;
      this.passwordLen = e.detail.value.length;
      this.agree();
    },
    // 登录
    login() {
      console.log(111);
      debugger;
      if (this.isChecked == false) {
        wx.showToast({
          icon: "none",
          title: "请同意用户协议以及隐私政策",
        });
        return;
      }else{
        wx.getUserProfile()
      }

      // this.getMemberLogin();
    },
    agree() {
      if (this.phoneLen == 11) {
        // 密码登录不合法直接返回
        if (this.passwordLen <= 0) {
          this.nextStep = false; //下一步按钮是否可点击
          return;
        }
        this.nextStep = true;
      }
    },
    // loginType() {
    //   if (this.passwordLogin) {
    //     this.passwordLogin = false;
    //   } else {
    //     this.passwordLogin = true;
    //   }
    //   this.nextStep = false;
    //   this.agree();
    // },
  },

  //密码登录
  // async getMemberLogin() {
  //   //md5加密
  //   let encryption = md5.hexMD5(this.password);
  //   let params = {
  //     mobile: this.phone,
  //     password: encryption,
  //   };
  //   let res = await api.loginPassword(params);
  //   try {
  //     wx.setStorageSync("token", res.data.token);
  //     wx.setStorageSync("userInfo", res.data);
  //     // this.getCardDetail();
  //     this.weappLoginBind();
  //   } catch (err) {
  //     wx.showToast({
  //       title: res.retMsg,
  //       icon: "none",
  //       duration: 3000,
  //     });
  //   }
  // },
};
</script>
<style lang="less">
page {
//  background: linear-gradient(#e9f5ff, transparent);
}
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: cover;
  // background-image: url("/static/login_bg.png");
  .login-logo {
    width: 182rpx;
    height: 182rpx;
    background-color: #ffffff;
    border-radius: 56rpx;
    margin-top: 267rpx;
    display: flex;
    justify-content: center;
    line-height: 182rpx;
    margin-bottom: 44rpx;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(44,84,191,0.07);
  }
  .welcome-text {
    margin-bottom: 94rpx;
  }
  .phoneNumber,
  .password,
  .captcha {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 642rpx;
    height: 106rpx;
    margin-bottom: 38rpx;
    background-color: #f2f7ff;
    border-radius: 62rpx;
    .icon {
      width: 58rpx;
      height: 40rpx;
      margin-left: 56rpx;
      padding-top: 2rpx;
    }
    .phone-input{
    display: flex;
    width: 642rpx;

    }
     .password-input{
    display: flex;
    width: 642rpx;
    }
    .password-icon {
      width: 58rpx;
      height: 40rpx;
      margin-right: 36rpx;
    }
    input {
      padding-left: 28rpx;
      width: 100%;
    }
    .button {
      width: 250rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      border-radius: 55rpx;
      margin-top: -30rpx;
      &::after {
        border: 0;
      }
    }
    .active {
      color: #4F87FF;
    }
    button[disabled][type="default"],
    wx-button[disabled]:not([type]) {
      // border: 1rpx solid #bfbfbf;
      background: none;
      margin: 0;
      padding: 0
      // color: #bfbfbf;
    }
  }
  .txt_group {
    display: flex;
    margin-bottom: 38rpx;
    .forget_password {
      padding: 0 20rpx;
      border-right: 1rpx solid #2a292f;
    }
    .login_type {
      padding: 0 20rpx;
    }
  }
  .go_back {
    display: flex;
    align-items: center;
    margin-bottom: 326rpx;
    .icon {
      width: 28rpx;
      height: 28rpx;
      margin: 0 5rpx;
    }
  }
  .quick-login {
    width: 642rpx;
    height: 106rpx;
    border-radius: 54rpx;
    background: #4f7cf3;
    color: #ffffff;
    margin-bottom: 444rpx;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
  }
  .login-agreement {
    margin-top: 326rpx;
  }
}
</style>
